<template>
  <div>
    <!-- <ReportInfo ref="modalForm" @ok="modalFormOk"></ReportInfo> -->
    <ReportModal ref="modalForm" @ok="modalFormOk"></ReportModal>
    <a-row :gutter="10" class="collect">
      <a-col :span="24" class="header_col">
        <div class="task_list_left_top_name">
          <div class="icon_box">
            <i class="iconfont icon-yueyongdianliangbili"></i>
          </div>

          <div class="name">核算报告</div>
        </div>
      </a-col>

      <a-col :md="24" :sm="24" class="collect_tab">
        <a-card :bordered="false">
          <!-- 查询区域 -->
          <div class="table-page-search-wrapper">
            <!-- 搜索区域 -->
            <div class="header_right">
              <!-- 操作按钮区域 -->
              <div class="table-operator">
                <a-button
                  @click="handleAdd"
                  type="primary"
                  icon="plus"
                  style="border-right: 1px solid rgb(211, 209, 209)"
                  >新建报告</a-button
                >
                <a-button
                  @click="batchDel"
                  v-if="selectedRowKeys.length > 0"
                  ghost
                  type="primary"
                  icon="delete"
                  >批量删除
                </a-button>
              </div>
            </div>
          </div>
          <!-- 操作按钮区域 -->

          <div class="ant-alert ant-alert-info">
            <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
            <a>
              <b>{{ selectedRowKeys.length }}</b> </a
            >项
            <a @click="onClearSelected">清空</a>
          </div>

          <div style="margin-top: 15px">
            <a-table
              style="height: 500px"
              ref="table"
              size="middle"
              bordered
              rowKey="id"
              :columns="columns"
              :dataSource="dataSource"
              :pagination="ipagination"
              :loading="loading"
              :rowSelection="{
                selectedRowKeys: selectedRowKeys,
                onChange: onSelectChange,
              }"
              @change="handleTableChange"
            >
              <span slot="state" slot-scope="text, record"> 审核完成 </span>
              <span slot="action" slot-scope="text, record">
                <!-- <a @click="handleDetail(record)">查看详情</a> -->
                <!-- <a-divider type="vertical" /> -->

                <a @click="ViewReport(record)">报告预览 </a>
                <a-divider type="vertical" />
                <a :href="record.filePath">下载报告</a>
                <!-- <a @click="downloadReport(record)">下载报告1</a> -->

                <!-- <a @click="emitViewReport(record)">报告预览</a>  -->

                <a-divider type="vertical" />
                <a>提交审核</a>
                <a-divider type="vertical" />
                <a>删除</a>
              </span>
            </a-table>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <div ref="file"></div>
  </div>
</template>
<script>
import { ListMixin } from "@/mixins/ListMixin";
import { deleteAction, postAction, getAction } from "@/api/manage";
import { reportPreview } from "@/api/api";

import ReportInfo from "./NewReports/ReportInfo.vue";
import ReportModal from "./NewReports/ReportModal.vue";
const docx = require("docx-preview");
import axios from "axios";
import bus from "@/bus";
export default {
  name: "RoleUserList",
  mixins: [ListMixin],
  components: {
    ReportInfo,
    ReportModal,
  },
  data() {
    return {
      columns: [
        {
          title: "报告名称",
          align: "left",
          dataIndex: "reportName",
        },
        {
          title: "创建人 ",
          align: "left",
          dataIndex: "createBy",
        },
        {
          title: "状态",
          align: "left",
          dataIndex: "state",
          scopedSlots: { customRender: "state" },
        },
        {
          title: "生成日期",
          dataIndex: "createTime",
          align: "left",
          sorter: true,
        },

        {
          title: "操作",
          dataIndex: "action",
          align: "left",
          scopedSlots: { customRender: "action" },
        },
      ],
      url: {
        list: "/accounting/report/list",
        delete: "/sys/role/delete",
      },
    };
  },

  methods: {
    ViewReport(record) {
      // axios({
      //   method: "get",
      //   responseType: "blob", // 设置响应文件格式
      //   url: record.filePath,
      // }).then(({ data }) => {
      //   console.log(data)
      //   docx.renderAsync(data, this.$refs.file); // 渲染到页面预览
      // });

       bus.$emit("emitViewReportFun", record);
      // reportPreview({ id: record.id }).then((res) => {
      //   console.log(res);
      //   docx.renderAsync(res, this.$refs.file); // 渲染到页面预览
      // });
    },
    // ViewReport(path) {
    //   let file = path;
    //   let lastIndex = file.lastIndexOf(".");
    //   let suffix = file.substring(lastIndex + 1);
    //   //文件格式是word文档、ppt、excel文件文件时
    //   if (
    //     suffix == "doc" ||
    //     suffix == "docx" ||
    //     suffix == "ppt" ||
    //     suffix == "xls" ||
    //     suffix == "xlsx"
    //   ) {
    //     let fileUrl = encodeURIComponent(file);
    //     //使用Office Web查看器
    //     let officeUrl =
    //       "http://view.officeapps.live.com/op/view.aspx?src=" + fileUrl;
    //     window.open(officeUrl, "_target");

    //     // window.open(record.filePath, "_target");
    //   }
    // },
    // emitViewReport(emitViewReport) {
    //   bus.$emit("emitViewReportFun", emitViewReport);
    // },
  },
};
</script>
<style  lang="scss">
@import "@/assets/css/listcommon.scss";
@import "@/assets/css/InternalAudit.scss";
/* @import '~@assets/less/common.less'; */
/** Button按钮间距 */
.ant-btn {
  margin-left: 8px;
}
</style>